var response;
var numClass;
var thumb_canvas;
var thumb_context;

function drawThumbnails(){
	//so here for canvas, we want to reset it by adjusting the width (clears the canvas)
	//this method draws ONE thumbnail. we need to modify it to draw 9 thumbnails on the web page
	thumb_canvas = document.getElementById("thumb");
	
	//n=Math.abs(n);
	//reset canvas
	thumb_canvas.width = thumb_canvas.width;
	//draw rectangle base
	thumb_context = thumb_canvas.getContext("2d");
	thumb_context.fillStyle="white";
	thumb_context.strokeStyle="black";
	
	thumb_context.strokeRect(50,25,200,125);
	thumb_context.strokeRect(300,25,200,125);
	thumb_context.strokeRect(550,25,200,125);
	
	thumb_context.strokeRect(50,175,200,125);
	thumb_context.strokeRect(300,175,200,125);
	thumb_context.strokeRect(550,175,200,125);
	
	thumb_context.strokeRect(50,325,200,125);
	thumb_context.strokeRect(300,325,200,125);
	thumb_context.strokeRect(550,325,200,125);
	
	thumb_context.strokeRect(50,475,200,125);
	thumb_context.strokeRect(300,475,200,125);
	thumb_context.strokeRect(550,475,200,125);
	
	
	thumb_context.fillRect(50,25,200,125);
	thumb_context.fillRect(300,25,200,125);
	thumb_context.fillRect(550,25,200,125);
	
	thumb_context.fillRect(50,175,200,125);
	thumb_context.fillRect(300,175,200,125);
	thumb_context.fillRect(550,175,200,125);
	
	thumb_context.fillRect(50,325,200,125);
	thumb_context.fillRect(300,325,200,125);
	thumb_context.fillRect(550,325,200,125);
	
	thumb_context.fillRect(50,475,200,125);
	thumb_context.fillRect(300,475,200,125);
	thumb_context.fillRect(550,475,200,125);
	
	
	

	var c = getRandColor();
	document.getElementById("controls").innerHTML="<h3>you are viewing answer set "+Math.abs((numClass%response.length)+1)+' of '+(response.length>100 ? "100+" :response.length)+'</h3> <div id="hide3"><input type="button" value="last schedule" onclick="drawAllClasses(numClass--);"></div><div id="hide2"><input type="button" value="next schedule" onclick="drawAllClasses(numClass++);"></div> <h3>uniques involved</h3>';

	var thisunique="";
	var thisSet;
	
	var limit=12;
	if(response.length < 12)
		limit = response.length;
		
	for(x=0;x<limit;x++){
			thisSet=response[x];
			
		for(i in thisSet){
			if(response[0][i][0]!=thisunique){
				document.getElementById("controls").innerHTML=document.getElementById("controls").innerHTML+"<br>"+abbreviation(thisSet[i][0])+" : "+thisSet[i][1];
				thisunique=response[0][i][0];
				c = getRandColor(); //this inside the if statement ensures that there is one color per event
			}
			
			DrawThumb(x,thisSet[i][2],thisSet[i][3],thisSet[i][4],thisSet[i][0],c);
		}
	
	}
	//end function. The rest is testing
	
	
	
	
	/*
	var can = document.getElementById("thumb");
	var con = can.getContext("2d");
	con.fillStyle="white";
	
	con.fillRect(50,25,200,125);
	con.fillRect(300,25,200,125);
	con.fillRect(550,25,200,125);
	
	con.fillRect(50,175,200,125);
	con.fillRect(300,175,200,125);
	con.fillRect(550,175,200,125);
	
	con.fillRect(50,325,200,125);
	con.fillRect(300,325,200,125);
	con.fillRect(550,325,200,125);
	
	con.fillRect(50,475,200,125);
	con.fillRect(300,475,200,125);
	con.fillRect(550,475,200,125);
	*/
	
}


function getRandColor(){
	return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
}

//For a thumbnail we only need the day, start, finish, and the random color
var days = Array("m","t","w","th","f");
function DrawThumb(num,day,start,end,nam,c){
	
	if(nam!=undefined && nam!="not found"){
		//define the origin for this particular event (for the particular schedule
		var xor=50+((num%3)*250);
		var yor=25+(Math.floor(num/3)*150);
		//now we know where, so translate the number to pixels.
		//alert(""+num+"("+xor+""+yor+")");
		//now all events related to schedule "num" have an origin to offset from.
		//width=200 height=125 200/5 120/12
		var x = (days.indexOf(day)*40) + (xor);
		var y = ((start/100)*5) + (yor);
		
		thumb_context = thumb_canvas.getContext("2d");
		thumb_context.fillStyle = c;
		
		thumb_context.fillRect(x,y,40,10*(end-start)/100);	
		
	}
}